<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header>
      <!-- 顶部左边区域，包含一个图标和标题  java教学辅助平台 -->
      <div class="header_top_left">
        <i class="el-icon-s-grid"></i>
        <div class="header_top_left_title">
          <strong>java教学实践平台</strong>
          <p>Java Teaching practice platform</p>
        </div>
      </div>
      <!-- 顶部右边区域，包含一个图标和 个人信息的下拉展示框  修改密码和退出登录-->
      <div class="header_top_right">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            {{studentNumber}}-{{ username }}
            <i class="el-icon-arrow-down"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-edit" @click.native="dialogVisible=true">修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-remove-outline" @click.native="loginOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <!-- 主要区域 -->
    <!-- 这里要变化，有四个路由，分别是在线课堂 章节作业 平时训练 课后训练 -->
    <el-container>
      <el-main>
        <router-view :userId="userId" :classId="classId"></router-view>
      </el-main>
    </el-container>

    <!-- 修改密码对话框 -->
    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">

      <el-form ref="form" :model="editPassworddata" :rules="rules" label-width="120px">
        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="editPassworddata.oldPassword" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword1">
          <el-input v-model="editPassworddata.newPassword1" type="password" validate-trigger="change"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPassword2">
          <el-input v-model="editPassworddata.newPassword2" type="password" validate-trigger="change"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPassword">提 交</el-button>
      </span>
    </el-dialog>

    <!-- 签到 -->
    <el-dialog title="学生签到" :visible.sync="dialogVisible_logo" width="30%" :before-close="LOgohandleClose">
      <span>{{logo}}</span>
      <br>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="LOgohandleClose">签 到</el-button>
      </span>
    </el-dialog>

  </el-container>
</template>

<script>
  export default {
    created() {
      // 获取传递的参数  
      this.userId = Number(window.sessionStorage.userId);
      this.username = window.sessionStorage.username;
      this.studentNumber = window.sessionStorage.studentNumber;
      this.classId = Number(window.sessionStorage.classId);
      this.submisslogo()
    },
    data() {
      var validatePassword = (rule, value, callback) => {
        if (value !== this.editPassworddata.newPassword1) {
          callback(new Error('两次输入的新密码不一致'));
        } else {
          callback();
        }
      };
      return {
        logoId:null,// 签到id
        logo:null,
        dialogVisible_logo: false,
        key: null,// redis的key
        userId: null,
        username: "",
        studentNumber: "",
        classId: null,
        dialogVisible: false,

        // 修改密码的数据
        editPassworddata: {
          oldPassword: '',
          newPassword1: '',
          newPassword2: ''
        },

        // 表单验证规则
        rules: {
          oldPassword: [
            { required: true, message: '请输入原密码', trigger: 'blur' },
          ],
          newPassword1: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, message: '最少6个字符', trigger: 'blur' }
          ],
          newPassword2: [
            { required: true, validator: validatePassword, trigger: 'change' }
          ],
        },

      };
    },
    methods: {
      // 退出登录。清除token
      loginOut() {
        this.userId = null
        this.username = ""
        this.studentNumber = ""
        this.classId = null
        window.sessionStorage.clear()
        this.$router.push('/login')
      },

      // 修改密码框关闭前的操作
      handleClose() {
        // 重置
        this.$refs.form.resetFields()
        this.dialogVisible = false
      },
      // 修改密码
      editPassword() {
        this.$refs.form.validate(async valid => {
          if (!valid) return;
          if (this.editPassworddata.oldPassword === this.editPassworddata.newPassword1) {
            return this.$message.error('新密码与原密码一致')
          }
          const data = {
            id: this.userId,
            oldPassword: this.editPassworddata.oldPassword,
            newPassword: this.editPassworddata.newPassword1,
          };
          const { data: res } = await this.$axios.post('/editPassword', data)
          if (res.code === 401) return this.$message.error('原密码错误')
          if (res.code !== 200) return this.$message.error('网络错误')
          this.$message.success('修改成功')
          this.handleClose()
        })
      },

      // 获取签到信息
      async submisslogo() {
        const { data: res } = await this.$axios.get("/getLogo", {
          params: {
            classId: this.classId,
            userId: this.userId
          }
        })
        if (res.code === 200) {
          // 表示未签到，需要弹框进行提醒用户进行签到
          this.key = res.data
          this.logo = res.msg
          this.logoId = res.logoId
          this.dialogVisible_logo = true
          return 
        }
        if (res.code === 201) {
          return this.key = null
        }
        return this.$message.error("签到时发生网络错误")
      },

      // 对话框关闭
      LOgohandleClose(){
        this.dialogVisible_logo = false
        this.logoTo()
      },

      // 用户签到
      async logoTo() {
        const { data: res } = await this.$axios.get("/logoTo", {
          params: {
            key: this.key,
            logoId:this.logoId
          }
        })
        if(res.code===200){
          return this.$message.success("签到成功")
        }
        if(res.code===201){
          return this.$message.error("网络错误")
        }
        if(res.code===202){
          return this.$message.error("超出时间")
        }
        this.$message.error("签到失败")
      }
    }


  }
</script>

<style lang="less" scoped>
  /* 顶部样式 */
  .el-header {
    display: flex;
    justify-content: space-between;
    margin: 0 40px;
    padding-top: 10px;

    /* 顶部左边区域 */
    .header_top_left {
      display: flex;

      i {
        font-size: 25px;
        margin: auto;
      }

      /* java教学辅助平台文字美化 */
      .header_top_left_title {
        margin-left: 10px;
        color: #233d98;

        strong {
          font-size: 25px;
        }

        p {
          font-size: 10px;
          margin: 0;
          padding: 0;
        }
      }
    }

    /* 顶部右边区域 */
    .header_top_right {
      margin-top: 20px;

      /* 展示的姓名 */
      .el-dropdown-link {
        font-size: 20px;
        color: #000;
      }
    }
  }

  .el-container {
    height: 100%;
  }
</style>